<template>
  <div class="home">
    <van-nav-bar left-arrow>
      <template #left>
        <div class="topImg"></div>
      </template>
      <template #right>
        <van-button
          class="clickshearch"
          round
          type="info"
          icon="search"
          to="/search"
          >搜素</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 导航栏区域 -->
    <van-tabs class="channel-tabs" v-model="indexes">
      <van-tab
        v-for="(item, index) in userChannelList"
        :key="item.id"
        :title="item.name"
        style="width= '340px'"
      >
        <article-list :channe_id="item.id" />
        <div class="icon-box">
          <van-icon name="wap-nav" @click="transmit(index)" />
        </div>
      </van-tab>
    </van-tabs>
    <!-- 频道管理 -->
    <van-action-sheet v-model="show.shows" title="频道管理" class="van_act">
      <sb
        :userChannelList="userChannelList"
        :show="show"
        v-model="indexes"
        @remo="remo"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { userchannelAPI } from "@/api";
//导入组件
import articleList from "./articleList.vue";
import sb from "./channels.vue";
export default {
  components: { articleList, sb },
  data() {
    return {
      userChannelList: [],
      show: {
        shows: false,
      },
      sub: 0,
      indexes: 0,
      trs: 0,
    };
  },
  async created() {
    // 判断用户是否登陆;
    if (this.$store.state.tokenobj.token) {
      //获取用户频道数据
      let userRes = await userchannelAPI();
      this.userChannelList = userRes.data.data.channels;
    } else {
      if (localStorage.getItem("userchannel")) {
        this.userChannelList = JSON.parse(localStorage.getItem("userchannel"));
      } else {
        //没有值就获取默认数据
        let userRes = await userchannelAPI();
        this.userChannelList = userRes.data.data.channels;
      }
    }
  },
  methods: {
    receive(v) {
      this.indexes = v;
    },
    transmit(index) {
      this.show.shows = true;
      this.trs = index;
    },
    remo() {
      this.indexes = this.indexes - 1;
    },
  },
};
</script>

<style scoped lang="less">
.topImg {
  width: 140px;
  height: 100%;
  background: url(../../assets/logo.4653c8be.png) no-repeat center / contain;
}
.clickshearch {
  width: 100px;
  height: 30px !important;
  border: none !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  .van-icon-search {
    color: #fff !important;
  }
}
// 频道栏
.channel-tabs {
  position: relative;
  // 包tab栏的盒子
  ::v-deep {
    .van-tabs__wrap {
      width: 355px;
    }
  }
  // 图标
  .icon-box {
    position: absolute;
    top: 5px;
    right: 0;
    background-color: #fff;
    .van-icon-wap-nav {
      font-size: 30px;
    }
  }
}
.channel_box {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .van_b {
    color: red;
    border: 1px solid red;
  }
}
</style>